<template>
    <a-form class="PageContent" labelAlign="left" layout="horizontal" :label-col="labelCol">
        <state :StyleValue="StyleValue" />
        <width :StyleValue="StyleValue" />
        <height :StyleValue="StyleValue" />
        <display :StyleValue="StyleValue" />
        <margin :StyleValue="StyleValue" />
    </a-form>
</template>
<script setup>
// import cssStringToObject from './util.js'
import { computed, inject, ref } from 'vue'

import state from './Item/state.vue'
import height from './Item/height.vue';
import width from './Item/width.vue';
import display from './Item/display.vue';
import margin from './Item/margin.vue'

const labelCol = { style: { width: '6em' } }

const StyleValue = ref({
    display: 'block',
});


// const StateEvent = inject('StateEvent');
// const RuleValue = computed(() => {
//     if (StateEvent.ActiveId.value) {
//         return StateEvent.GetRuleById(StateEvent.ActiveId.value)
//     } else {
//         return {}
//     }
// });

</script>
<style scoped lang="less">
.PageContent {
    user-select: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px 8px;

    :deep(.ant-form-item) {
        padding: 8px 0;
        margin-bottom: 0px;
        border-bottom: 1px solid #f0f0f0;
    }

}
</style>